<template>
  <div>
    <el-row :gutter="20">
      <el-col :span="6">
        <div>
          <el-card shadow="hover" class="box-card">
            <div slot="header" class="clearfix">
              <span>成长档案</span>
              <el-button style="float: right; padding: 3px 0" type="text" @click="toArchive">参看更多</el-button>
            </div>
            <div class="card_item">
              <div class="card_lft ft">
                <span style="center">{{ archive }}条记录</span>
              </div>

              <div class="card_rit">
                <img class="img" src="../../../assets/images/da.svg">
              </div>
            </div>
          </el-card>
        </div>
      </el-col>
      <el-col :span="6">
        <div>
          <el-card shadow="hover" class="box-card">
            <div slot="header" class="clearfix">
              <span >育儿知识库</span>
              <el-button style="float: right; padding: 3px 0" type="text" @click="toKnowledge">操作按钮</el-button>
            </div>
            <div class="card_item">
               <div class="card_lft ft">
                <span style="center">{{ knowledges }}篇文章</span>
               </div>

              <div class="card_rit">
                <img class="img" src="../../../assets/images/zsk.svg">
              </div>
            </div>
          </el-card>
        </div>
      </el-col>
      <el-col :span="6">
        <div>
          <el-card shadow="hover" class="box-card">
            <div slot="header" class="clearfix">
              <span>问题反馈</span>
              <el-button style="float: right; padding: 3px 0" type="text" @click="toFeedback">操作按钮</el-button>
            </div>
            <div class="card_item">

              <div class="card_lft ft">
                <span style="center">{{ feedback }}个反馈</span>
              </div>
              <div class="card_rit">
                <img class="img" src="../../../assets/images/wt.svg">
              </div>
            </div>
          </el-card>
        </div>
      </el-col>
      <el-col :span="6">
        <div>
          <el-card shadow="hover" class="box-card">
            <div slot="header" class="clearfix">
              <span>园内动态</span>
              <el-button style="float: right; padding: 3px 0" type="text" @click="toDynamic">查看更多</el-button>
            </div>
            <div class="card_item">
              <div class="card_lft ft">
                <span style="center">{{ dynamic }}个动态</span>
              </div>

              <div class="card_rit">
                <img class="img" src="../../../assets/images/dt.svg">
              </div>
            </div>
          </el-card>
        </div>
      </el-col>
    </el-row>

  </div>
</template>


<script>
import { countKnowledges } from "@/api/knowledges/knowledges";
import { countArchive } from "@/api/archive/archive";
import { countFeedback } from "@/api/feedback/feedback";
import { countDynamic } from "@/api/dynamic/dynamic";

export default {
  name: "index",
  data(){
    return{
      name:"ddd",
      archive:'',
      knowledges:'',
      feedback:'',
      dynamic:''
    }
  },
  methods: {
    //前往成长档案
    toArchive(){
      this.$router.push('/archive/archive/index');
    },
    archiveCount(){
      this.loading = true;
      countArchive().then(response => {
        // alert(response)
        console.log(response);
        this.archive=response
      });
    },
    
    //前往育儿知识库
    toKnowledge() {
      this.$router.push('/knowledges/knowledges/index');
    },
    knowledgesCount(){
      this.loading = true;
      countKnowledges().then(response => {
        // alert(response)
        console.log(response);
        this.knowledges=response
      });
    },

    //前往问题反馈
    toFeedback() {
      this.$router.push('/feedback/feedback/index');
    },
    feedbackCount(){
      this.loading = true;
      countFeedback().then(response => {
        // alert(response)
        console.log(response);
        this.feedback=response
      });
    },
    
    //前往园内动态
    toDynamic() {
      this.$router.push('/dynamic/dynamic/index');
    },
    dynamicCount(){
      this.loading = true;
      countDynamic().then(response => {
        // alert(response)
        console.log(response);
        this.dynamic=response
      });
    }
  },
  mounted(){
    this.knowledgesCount(),
    this.archiveCount(),
    this.feedbackCount(),
    this.dynamicCount()
  }
}
</script>



<style scoped lang="scss">
.img{
  width: 40px;
}
.ft{
 font-size: 24px;
}
.card_lft{
  width: 60%;
  align-items: center;
  justify-content: center; display: flex;

}
.card_rit{
  width: 40%;
  align-items: center;
  justify-content: center;
  display: flex;

}
.card_item{
  min-height: 110px;
  display: flex;
}
.lft{
  width: 70%;
  padding: 5px;
  min-height: 160px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.5rem;
  line-height: 2rem;
}
.rt{
  width: 30%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.topItem{
  min-height: 215px;
  border-radius: 5px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1)
}
.line {
  width: 100%;
  height: 1px;
  background: linear-gradient(to right, #ff5f6d, #ffc371);
  border-radius: 1px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
.topItem_header{
  font-weight: 700;
  font-size: 16px;
  min-height: 25px;
  padding: 5px;
  display: inline-block;
  flex: 1;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
</style>
